<template>
	<div class="charts" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
		<div class="title">“两违”监测</div>
		<div class="filter">
			<div>
				<span>发现时间</span>
				<el-date-picker value-format="YYYY-MM-DD" v-model="chooseDate" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" size="large" @change="changeDate" />
			</div>
			<div>
				<span>违建属地</span>
				<el-select v-model="queryParams.townCode" clearable placeholder="请选择" style="width: 600px">
					<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<!-- <div>
				<span>违建类别</span>
				<el-select v-model="queryParams.twoNonType" clearable placeholder="请选择" style="width: 600px">
					<el-option v-for="item in useIllegal.typeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div> -->
			<div class="filter-btn">
				<el-button @click="handleSearch">查询</el-button>
				<el-button @click="handleReset">重置</el-button>
			</div>
		</div>
		<div class="cards">
			<div class="bar">
				<Title name="违建排行榜TOP10" />
				<div style="width: 30vw">
					<v-chart autoresize :option="barOption" style="height: 717px" @click="onChartClick"></v-chart>
				</div>
			</div>
			<div class="line">
				<Title name="违建新增趋势" />
				<div style="width: 63vw">
					<v-chart ref="lineChart" autoresize :option="lineOption" style="height: 717px" @click="onLineChartClick"></v-chart>
				</div>
			</div>
		</div>
		<el-dialog title="" v-model="dialogVisible" width="2300" align-center>
			<List :areaType="areaType" :logType="0" :dateType="dateType" :nonType="nonType" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { useIllegalStore } from '@/store/modules/illegal'
import * as echarts from 'echarts'
import Title from '../components/title.vue'
import { getAreaList, getLoginAuth, getRanking, getTrend } from '@/api/illegal'
import List from '../components/list.vue'
import { getToken, setToken } from '@/utils/auth'
import router from '@/router'
const lineChart = ref(null)
const dialogVisible = ref(false)
const loading = ref(false)
const areaType = ref('')
const dateType = ref('')
const nonType = ref('')
const chooseDate = ref()
const useIllegal = useIllegalStore()
const areaOptions = ref([])
const initialQuery = () => ({
	startTime: '',
	endTime: '',
	townCode: '',
	twoNonType: '',
})
const queryParams = reactive(initialQuery())
// 筛选日期
const changeDate = (val: any) => {
	if (val) {
		queryParams.startTime = val[0]
		queryParams.endTime = val[1]
	} else {
		queryParams.startTime = ''
		queryParams.endTime = ''
	}
	console.log(queryParams)
}
// 点击查询
const handleSearch = () => {
	nonType.value = queryParams.twoNonType
	getRanking(queryParams).then((res) => {
		barOption.value.yAxis[0].data = res.data.names
		barOption.value.yAxis[1].data = res.data.totals
		barOption.value.series[0].data = res.data.totals
	})
	getTrend(queryParams).then((res) => {
		lineOption.value.xAxis.data = res.data.names
		lineOption.value.series[0].data = res.data.totals
		// console.log('line', lineOption.value)
	})
}
// 点击重置
const handleReset = () => {
	Object.assign(queryParams, initialQuery())
	chooseDate.value = ''
	nonType.value = ''
	getRanking(queryParams).then((res) => {
		barOption.value.yAxis[0].data = res.data.names
		barOption.value.yAxis[1].data = res.data.totals
		barOption.value.series[0].data = res.data.totals
	})
	getTrend(queryParams).then((res) => {
		lineOption.value.xAxis.data = res.data.names
		lineOption.value.series[0].data = res.data.totals
	})
}
const barOption = ref({
	grid: {
		left: 150,
	},
	xAxis: {
		type: 'value',
		axisLabel: {
			show: false, // 是否显示刻度标签
		},
		splitLine: {
			show: false, // 设置X轴方向的辅助线是否显示
		},
	},
	yAxis: [
		{
			type: 'category',
			inverse: true, //如果数据数组倒置排序，加上此代码
			data: [],
			offset: 120,
			axisLabel: {
				fontSize: 24,
				color: 'rgb(255, 255, 255)',
				// margin: 70, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用
				align: 'left',
				rich: {
					a1: {
						color: '#EA2739',
						fontSize: 20,
						align: 'center',
					},
					a2: {
						color: '#FF8C40',
						fontSize: 20,
						align: 'center',
					},
					a3: {
						color: 'rgba(5, 205, 255, 1)',
						fontSize: 20,
						align: 'center',
					},
					a4: {
						color: 'rgba(255, 255, 255, 0.8)',
						fontSize: 20,
						align: 'center',
					},
				},
				formatter: (params, index) => {
					// console.log(params, '啦啦哈')
					// ${" ".repeat(5)} 是添加5个空格
					let result
					if (index == 0) {
						result = `{a1|${index + 1}}${' '.repeat(2)}${params}`
					} else if (index == 1) {
						result = `{a2|${index + 1}}${' '.repeat(2)}${params}`
					} else if (index == 2) {
						result = `{a3|${index + 1}}${' '.repeat(2)}${params}`
					} else {
						result = `{a4|${index + 1}}${' '.repeat(2)}${params}`
					}
					return result
				},
			},
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				//修改背景线条样式
				show: false,
			},
		},
		{
			//右侧value数值
			inverse: true, //如果数据数组倒置排序，加上此代码
			data: [],
			axisLabel: {
				textStyle: {
					color: '#fff',
					fontSize: '32',
				},
				formatter: (value) => {
					// console.log(data1,'data1哈哈啊');
					if (value) {
						value = (value * 1).toLocaleString()
					}
					return value
				},
			},
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				//修改背景线条样式
				show: false,
			},
		},
	],
	series: [
		{
			data: [],
			type: 'bar',
			barWidth: '24', // 设置柱子的宽度
			// 每一个条目的样式配置
			itemStyle: {
				color: ' rgba(26, 131, 255, 1)', // 这是设置所有柱子为同一个颜色
			},
			showBackground: true,
			backgroundStyle: {
				color: 'rgba(26, 131, 255, 0.1)',
			},
		},
	],
})
const lineOption = ref({
	title: {
		text: '违建新增数(件)',
		top: 40,
		left: 30,
		textStyle: {
			color: 'rgba(255, 255, 255, 0.6)',
			fontSize: 24,
		},
	},
	grid: {
		left: 80,
		right: 50,
		top: 120,
		bottom: 40,
	},
	tooltip: {
		trigger: 'axis',
		// formatter: function (params) {
		// 	const { name, value } = params[0]
		// 	var htmlText = `<div style='background:red;padding:0;'>
		//                     <div >
		//                         ${name}
		//                     </div>
		//                     <div>违建新增数：</div>
		//                     <div>
		//                       ${value || 0}
		//                     </div>
		//                 </div>`
		// 	return htmlText
		// },
	},
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		axisLabel: {
			// formatter: '{value} 件',
			textStyle: {
				color: 'rgba(255, 255, 255, 0.6)',
				fontSize: 20,
			},
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			lineStyle: {
				width: 2,
				type: 'solid',
				color: 'rgba(255, 255, 255, 0.6)',
			},
		},
	},
	yAxis: {
		type: 'value',
		axisLabel: {
			// formatter: '{value} 件',
			textStyle: {
				color: 'rgba(255, 255, 255, 0.6)',
				fontSize: 20,
			},
		},
		splitLine: {
			lineStyle: {
				type: 'dashed',
				color: 'rgba(255, 255, 255, 0.3)',
			},
		},
	},
	series: [
		{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			smooth: true,
			// symbol: 'none',
			lineStyle: {
				width: 4,
				color: 'rgba(27, 178, 224, 1)',
			},
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgb(27, 178, 224,0.2)',
					},
					{
						offset: 1,
						color: 'rgb(27, 178, 224,0)',
					},
				]),
			},
		},
	],
})
// 点击bar图表
const onChartClick = (event: any) => {
	// console.log('event', event)
	let f = areaOptions.value.find((value, index, array) => {
		return value.label == event.name
	}) // 找不到的就返回undefined
	// console.log(f); //{ id: 2, name: '小红' }
	// console.log('event', f)
	areaType.value = f.value
	dateType.value = ''
	dialogVisible.value = true
}
// 点击line图表
function onLineChartClick(event: any) {
	console.log('line', event)
	areaType.value = ''
	dateType.value = event.name
	dialogVisible.value = true
}
const route = useRoute()
onMounted(async () => {
	loading.value = true

	const token = getToken()
	if (!token) {
		const paramValue = route.query.code
		console.log(paramValue)
		await getLoginAuth({ code: paramValue })
			.then((res) => {
				setToken(res.data.token)
				useIllegal.getLeaderDeptList()
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false

				router.push('/401')
			})
	} else {
		useIllegal.getLeaderDeptList()
	}

	// 获取违建属地
	getAreaList()
		.then((res) => {
			loading.value = false
			const map = res.data
			for (let item in map) {
				areaOptions.value.push({ value: item, label: map[item] })
			}
			// console.log('map', areaOptions.value)
		})
		.catch((err) => {
			ElMessage.error(err)
			loading.value = false
		})
	// 获取柱状图
	getRanking(queryParams)
		.then((res) => {
			barOption.value.yAxis[0].data = res.data.names
			barOption.value.yAxis[1].data = res.data.totals
			barOption.value.series[0].data = res.data.totals
			// loading.value = false
		})
		.catch((err) => {
			ElMessage.error(err)
			// loading.value = false
		})
	// 获取折线图
	getTrend(queryParams).then((res) => {
		lineOption.value.xAxis.data = res.data.names
		lineOption.value.series[0].data = res.data.totals
		// console.log('line', lineOption.value)
	})
})
</script>
<style lang="scss" scoped>
.charts {
	@include frame;
}
.filter {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: space-between;
	height: 136px;
	margin: 30px 0;
	font-size: 24px;
	span {
		margin-right: 15px;
	}
	&-btn {
		text-align: right;
		width: 100%;
		:deep(.el-button) {
			font-size: 24px;
			color: white;
			height: 100%;
			width: 120px;
			background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 0%, rgba(27, 178, 224, 0.4) 100%);
			border: 2px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0px 0px 15px rgba(27, 178, 224, 1) inset;
		}
	}
}
.cards {
	display: flex;
	height: 791px;
	justify-content: space-between;
	.bar {
		width: 720px;
		background: rgba(26, 143, 255, 0.04);
	}
	.line {
		width: 1530px;
		background: rgba(26, 143, 255, 0.04);
	}
}
:deep(.el-input__wrapper) {
	background-color: transparent;
	input {
		color: white;
		font-size: 22px;
	}
}
// 下拉框
:deep(.el-select__wrapper) {
	min-height: 58px;
	background-color: transparent;
	span {
		color: white;
		font-size: 22px;
	}
}
:deep(.el-range-separator) {
	color: white;
}
:deep(.el-date-editor) {
	width: 600px;
	height: 58px;
}

.barChart {
	width: 720px;
	height: 400px;
}
:deep(.el-dialog) {
	background-color: transparent !important;
	background-image: url('@/assets/images/illegal/background.png') !important;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 1266px;
}
:deep(.el-dialog__headerbtn) {
	width: 150px;
}
</style>
